<html>
    <head>
<link rel="stylesheet" type="text/css" href="search_bar.css">

</head>
<body>
<style>
        .demo1{
            width: 500px;
            height: 300px;
            line-height: 50px;
            text-align: center;
        }
        .demo1:before{
            background: url(http://csssecrets.io/images/tiger.jpg) no-repeat;
            background-size: cover;
            width: 500px;
            height: 300px;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;/*-1 可以当背景*/
            -webkit-filter: blur(3px);
            filter: blur(3px);
        }</style>
        <div class="demo1">背景图半透明，文字不透明<br />方法：背景图+ filter：blur</div>


<div id="jsearch-bar">
    <div class="jbar-input">
    <input type="text" placeholder="jSearch" />
    
            
    <svg id="jbar-logo" class="jsearch-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs></defs><title>jSearch-logo</title><path class="cls-1" d="M139.1,117.2a53.71,53.71,0,0,1-13.48,1.52c-12.93,0-23.07-5.73-23.07-13,0-5.49,6.26-9.94,14-9.94,7.1,0,13,2.26,17,6.53A21.52,21.52,0,0,1,139.1,117.2Z" transform="translate(0)"/><path class="cls-1" d="M148.69,54.92c0,.72-.23,1.51-.57,1.51-1.05,0-2.57-1.62-2.57-4.19a11.45,11.45,0,0,1,.53-3.53A8.13,8.13,0,0,1,148.69,54.92Z" transform="translate(0)"/><path class="cls-1" d="M100,0A100,100,0,1,0,200,100,100,100,0,0,0,100,0ZM83,93.74c-2,25.62-3.2,35.68-5.68,46.8-4,17.68-13.6,27.81-26.31,27.81-9.44,0-16.3-6.29-16.3-15a14.1,14.1,0,0,1,14-14.16c4.6,0,6.93,1.92,6.93,5.72A5,5,0,0,1,50.33,150c-.46,0-.87,0-1.28-.07a8.91,8.91,0,0,0-1-.06c-.67,0-2.31,1.35-2.31,3.38,0,2.28,1.7,4.59,5.52,4.59,6.85,0,12.44-7.07,15.37-19.38C69,128.82,70.31,115.12,72,93.18l.81-10.58a5.47,5.47,0,0,1,5.44-5.14,5.4,5.4,0,0,1,5.46,5.46C83.66,86,83.29,90.47,83,93.74ZM84.88,67.5c-1.21,3.58-2.14,6.41-6.15,6.41a4.4,4.4,0,0,1-1.87-.32,5.67,5.67,0,0,1-3.72-5.14,4.58,4.58,0,0,1,.3-1.86c1.26-3.73,2.2-6.41,6.1-6.41a5.53,5.53,0,0,1,5.59,5.46A5.59,5.59,0,0,1,84.88,67.5Zm63.91,57.28C145.19,138.16,134.8,145,131,145a5.28,5.28,0,0,1-5.59-5.19,5.53,5.53,0,0,1,3.36-5.1,15.93,15.93,0,0,0,6.93-6.32c-.68.1-1.35.19-2,.25a70,70,0,0,1-8,.42c-19.69,0-34-9.89-34-23.54,0-11.47,10.93-20.46,24.88-20.46,17.31,0,30.54,11.07,32.94,26.87a13.87,13.87,0,0,0,4.87-10.56c0-10.55-7.72-15.09-22.94-20.26-12-4.16-25.69-8.85-25.69-23.68,0-11.24,10.07-22.61,29.31-22.61a35,35,0,0,1,8.13,1A24.84,24.84,0,0,1,158,31.11a5.4,5.4,0,0,1,5.59,5.46c0,2.81-2.46,4.92-5.73,4.92a12.73,12.73,0,0,0-3.6.51,17.39,17.39,0,0,1,5.31,12.92c0,5.78-4.39,12-11.49,12-7.56,0-13.49-6.47-13.49-14.71a20.64,20.64,0,0,1,1.27-7c-.38,0-.74,0-1,0-11.89,0-18.12,6.15-18.12,12.23s5.36,9,18.17,13.58,30.33,10.73,30.33,30.36C165.24,111.59,159.26,120,148.79,124.78Z" transform="translate(0)"/></svg>

</div>
</div>

<svg id="jsearch-logo" class="jsearch-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs></defs><title>jSearch-logo</title><path class="cls-1" d="M139.1,117.2a53.71,53.71,0,0,1-13.48,1.52c-12.93,0-23.07-5.73-23.07-13,0-5.49,6.26-9.94,14-9.94,7.1,0,13,2.26,17,6.53A21.52,21.52,0,0,1,139.1,117.2Z" transform="translate(0)"/><path class="cls-1" d="M148.69,54.92c0,.72-.23,1.51-.57,1.51-1.05,0-2.57-1.62-2.57-4.19a11.45,11.45,0,0,1,.53-3.53A8.13,8.13,0,0,1,148.69,54.92Z" transform="translate(0)"/><path class="cls-1" d="M100,0A100,100,0,1,0,200,100,100,100,0,0,0,100,0ZM83,93.74c-2,25.62-3.2,35.68-5.68,46.8-4,17.68-13.6,27.81-26.31,27.81-9.44,0-16.3-6.29-16.3-15a14.1,14.1,0,0,1,14-14.16c4.6,0,6.93,1.92,6.93,5.72A5,5,0,0,1,50.33,150c-.46,0-.87,0-1.28-.07a8.91,8.91,0,0,0-1-.06c-.67,0-2.31,1.35-2.31,3.38,0,2.28,1.7,4.59,5.52,4.59,6.85,0,12.44-7.07,15.37-19.38C69,128.82,70.31,115.12,72,93.18l.81-10.58a5.47,5.47,0,0,1,5.44-5.14,5.4,5.4,0,0,1,5.46,5.46C83.66,86,83.29,90.47,83,93.74ZM84.88,67.5c-1.21,3.58-2.14,6.41-6.15,6.41a4.4,4.4,0,0,1-1.87-.32,5.67,5.67,0,0,1-3.72-5.14,4.58,4.58,0,0,1,.3-1.86c1.26-3.73,2.2-6.41,6.1-6.41a5.53,5.53,0,0,1,5.59,5.46A5.59,5.59,0,0,1,84.88,67.5Zm63.91,57.28C145.19,138.16,134.8,145,131,145a5.28,5.28,0,0,1-5.59-5.19,5.53,5.53,0,0,1,3.36-5.1,15.93,15.93,0,0,0,6.93-6.32c-.68.1-1.35.19-2,.25a70,70,0,0,1-8,.42c-19.69,0-34-9.89-34-23.54,0-11.47,10.93-20.46,24.88-20.46,17.31,0,30.54,11.07,32.94,26.87a13.87,13.87,0,0,0,4.87-10.56c0-10.55-7.72-15.09-22.94-20.26-12-4.16-25.69-8.85-25.69-23.68,0-11.24,10.07-22.61,29.31-22.61a35,35,0,0,1,8.13,1A24.84,24.84,0,0,1,158,31.11a5.4,5.4,0,0,1,5.59,5.46c0,2.81-2.46,4.92-5.73,4.92a12.73,12.73,0,0,0-3.6.51,17.39,17.39,0,0,1,5.31,12.92c0,5.78-4.39,12-11.49,12-7.56,0-13.49-6.47-13.49-14.71a20.64,20.64,0,0,1,1.27-7c-.38,0-.74,0-1,0-11.89,0-18.12,6.15-18.12,12.23s5.36,9,18.17,13.58,30.33,10.73,30.33,30.36C165.24,111.59,159.26,120,148.79,124.78Z" transform="translate(0)"/></svg>


<script src="search_bar.js"></script>
<script src="../public/hotkeys.min.js"></script>
<script src="search_bar_func.js"></script>
</body>
</html>